<template>
  <div class="myBetCell">
    <div v-for="bill in list" :key="bill.months" class="myBetCell-bill">
      <!-- 表头:月份 -->
      <div class="myBetCell-bill-header">
        <div
          class="myBetCell-bill-header-title"
          :style="{ 'margin-bottom': '0' }"
        >
          {{ bill.months }}
        </div>
      </div>
      <!-- 列表 -->
      <div
        class="myBetCell-list items-center"
        v-for="(item, index) in bill.list"
        :key="item.id"
        :style="{
          'border-bottom':
            index != bill.list.length - 1
              ? '1px solid rgba(115, 119, 128, 0.15)'
              : 'none',
        }"
      >
        <!-- 样式一: 下注记录 -->
        <template v-if="cellType == 1">
          <img
            v-if="item.drawType == 1"
            class="myBetCell-list-left"
            style="margin-top: 2.5px"
            src="/image/lotterymoney/mybet-bdcxz.svg"
          />
          <img
            v-if="item.drawType == 2"
            class="myBetCell-list-left"
            style="margin-top: 2.5px"
            src="/image/lotterymoney/mybet-bdcxz.svg"
          />
          <img
            v-if="item.drawType == 3"
            class="myBetCell-list-left"
            style="margin-top: 2.5px"
            src="/image/lotterymoney/mybet-myfree.svg"
          />
          <div class="myBetCell-list-right">
            <div class="items-center">
              <span class="myBetCell-list-right-title"
                >{{
                  $t(
                    item.drawType == 1
                      ? "lotteryMoney.bdcxz"
                      : item.drawType == 2
                      ? "lotteryMoney.xjdhbdcxz"
                      : "lotteryMoney.mfxz"
                  )
                }}
              </span>
              <span class="myBetCell-list-right-date"
                >{{ formatWithTimeZone(item.drawTime, "Asia/Jakarta") }}
              </span>
              <template v-if="item.sessionId == item.periodId">
                <img
                  v-if="globalStore.$state.language == 'VI'"
                  class="myBetCell-list-right-title-tag"
                  src="/image/lotterymoney/super-icon1.svg"
                />
                <img
                  v-else-if="globalStore.$state.language == 'pt'"
                  class="myBetCell-list-right-title-tag"
                  src="/image/lotterymoney/super-icon.svg"
                />
                <img
                  v-else
                  class="myBetCell-list-right-title-tag"
                  src="/image/lotterymoney/super-icon2.svg"
                />
              </template>
            </div>
            <div class="items-center" style="justify-content: space-between">
              <span class="myBetCell-list-right-time">{{ item.timeStr }}</span>
              <span v-if="item.drawType != 3" class="myBetCell-list-right-bdc">
                -{{ item.costBdcAmount }} BDC
              </span>
              <!-- <span class="myBetCell-list-right-bdc">
                -{{ item.costBdcAmount }} BDC
              </span> -->
            </div>
            <div class="items-center myBetCell-list-right-footer">
              <div class="items-center">
                <span class="myBetCell-list-right-hash">Hash：</span>
                <span
                  v-if="!item.transactionHash"
                  class="myBetCell-list-right-hash-value"
                  style="margin-bottom: 2px"
                  >{{
                    !item.hashStatus
                      ? "--"
                      : item.hashStatus == 1
                      ? $t("lotteryMoney.slz")
                      : "--"
                  }}</span
                >
                <div v-else class="items-center">
                  <span
                    class="myBetCell-list-right-hash-value"
                    @click.stop="jumpPage('webview1', item.transactionHash)"
                  >
                    {{ item.transactionHash.substring(0, 4) }}***{{
                      item.transactionHash.substring(
                        item.transactionHash.length - 6,
                        item.transactionHash.length
                      )
                    }}
                  </span>
                  <img
                    class="myBetCell-list-right-hash-copy"
                    src="/image/lotterymoney/mybet-copy.svg"
                    @click.stop="getCopy(item.transactionHash)"
                  />
                </div>
              </div>
              <!-- 队伍 -->
              <div class="myBetCell-list-right-temas">
                {{
                  item.teamConfigId == 1
                    ? $t("lotteryMoney.redTeam")
                    : item.teamConfigId == 2
                    ? $t("lotteryMoney.yellowTeam")
                    : $t("lotteryMoney.blueTeam")
                }}
                {{ $t("lotteryMoney.team") }}
              </div>
            </div>
          </div>
        </template>
        <!-- 样式二: 中奖记录 -->
        <template v-else>
          <img
            v-if="item.winnerType == 2"
            class="myBetCell-list-left"
            src="/image/lotterymoney/teams-zjjl.svg"
          />
          <img
            v-else-if="item.sessionId != item.periodId"
            class="myBetCell-list-left"
            src="/image/lotterymoney/luck-zjjl.svg"
          />
          <img
            v-else
            class="myBetCell-list-left"
            src="/image/lotterymoney/super-zjjl.svg"
          />

          <div class="myBetCell-list-right">
            <div class="items-center" style="justify-content: space-between">
              <div class="items-center">
                <span class="myBetCell-list-right-title">
                  {{
                    $t(
                      item.winnerType == 2
                        ? "lotteryMoney.dwfhjl"
                        : item.sessionId != item.periodId
                        ? "lotteryMoney.xydyj"
                        : "lotteryMoney.cjdyj"
                    )
                  }}
                </span>
                <span class="myBetCell-list-right-date"
                  >{{ formatWithTimeZone(item.sessionTime, "Asia/Jakarta") }}
                </span>

                <template v-if="item.sessionId == item.periodId">
                  <img
                    v-if="globalStore.$state.language == 'VI'"
                    class="myBetCell-list-right-title-tag"
                    src="/image/lotterymoney/super-icon1.svg"
                  />
                  <img
                    v-else-if="globalStore.$state.language == 'pt'"
                    class="myBetCell-list-right-title-tag"
                    src="/image/lotterymoney/super-icon.svg"
                  />
                  <img
                    v-else
                    class="myBetCell-list-right-title-tag"
                    src="/image/lotterymoney/super-icon2.svg"
                  />
                </template>
              </div>
              <!-- 队伍 -->
              <div class="myBetCell-list-right-temas1">
                {{
                  item.teamConfigId == 1
                    ? $t("lotteryMoney.redTeam")
                    : item.teamConfigId == 2
                    ? $t("lotteryMoney.yellowTeam")
                    : $t("lotteryMoney.blueTeam")
                }}
                {{ $t("lotteryMoney.team") }}
              </div>
            </div>

            <div class="items-center" style="justify-content: space-between">
              <div class="items-center">
                <div class="myBetCell-list-right-bdc" style="margin-right: 4px">
                  {{ item.prizeAmount < 0.001 ? "≈" : "" }}$
                  {{
                    Number(item.prizeAmount) > 0.001
                      ? toThousands(decimalToLength(item.prizeAmount))
                      : 0.001
                  }}
                </div>
                <div class="myBetCell-list-right-time" style="font-size: 12px">
                  ={{
                    toThousands(
                      decimalToLength(new Decimal(item.prizeAmount).mul(1000))
                    )
                  }}BDC
                </div>
              </div>
              <span class="myBetCell-list-right-time" style="font-size: 12px">{{
                item.timeStr
              }}</span>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="myBetCell">
import { toThousands, decimalToLength } from "@/utils";
import { useClipboard } from "@vueuse/core";
import Decimal from "decimal.js";
import { BDC_blockchain_Host } from "@/config";
import { useGlobalStore } from "~~/store/global";

const globalStore = useGlobalStore();
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    list: any;
    cellType: number;
  }>(),
  {
    list: [],
    cellType: 1, // 1. 下注记录 2.中奖记录
  }
);
// 期数格式化
const formatWithTimeZone = (date: any, timeZone: string) => {
  const yearFormatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    timeZone: timeZone,
  });
  const monthFormatter = new Intl.DateTimeFormat("en-US", {
    month: "numeric",
    timeZone: timeZone,
  });
  const dayFormatter = new Intl.DateTimeFormat("en-US", {
    day: "numeric",
    timeZone: timeZone,
  });
  const year = yearFormatter.format(new Date(Number(date)));
  const month = monthFormatter.format(new Date(Number(date)));
  const day = dayFormatter.format(new Date(Number(date)));

  return `${year}.${month}.${day}`;
};

/**
 * @description: 获取剪贴板内容
 */
const getCopy = (val: string) => {
  if (!val) return;
  const { copy, isSupported } = useClipboard({
    source: "",
  });
  if (!isSupported.value) {
    showToast(t("mvp.other.bzcjtb"));
  } else {
    copy(val);
    showToast(t("mvp.other.fzcg"));
  }
};

// 点击-页面跳转
const jumpPage = async (val: string, params: string) => {
  if (val === "webview1" && params) {
    bridge.defaultBrowserOpen(`${BDC_blockchain_Host}${params}`);
    // navigateI18nTo({
    //   path: "/webview",
    //   query: {
    //     src: `${BDC_blockchain_Host}${params}`,
    //     title: t("lotteryMoney.hashPage"),
    //     isShow: 1,
    //   },
    // });
  }
};
</script>
<style scoped lang="scss">
.myBetCell {
  &-bill {
    margin: 10 * 2px 0;
    border-radius: 12 * 2px;
    overflow: hidden;
    // padding-bottom: 30 * 2px;
    background-color: #fff;
    &-header {
      background-color: #fff;
      padding-bottom: 14 * 2px;
      &-title {
        display: inline-block;
        font-size: 15 * 2px;
        font-weight: 590;
        color: #007bff;
        padding: 5 * 2px 15 * 2px;
        border-bottom-right-radius: 12 * 2px;
        background-color: #ecf5ff;
      }
      &-text {
        font-size: 13 * 2px;
        color: #141924;
        padding-right: 10 * 2px;
      }
    }
  }
  &-list {
    position: relative;
    align-items: flex-start;
    margin: 0 * 2px 15 * 2px;
    padding: 14 * 2px 0 * 2px;
    background-color: #fff;
    &-left {
      width: 36 * 2px;
      height: 36 * 2px;
      margin-right: 10 * 2px;
    }
    &-right {
      flex: 1;
      &-title {
        font-size: 14 * 2px;
        color: #141924;
        font-weight: 510;
        margin-right: 4 * 2px;
        padding-right: 4 * 2px;
        border-right: 3px solid rgba(115, 119, 128, 0.15);
        &-tag {
          margin-left: 4 * 2px;
        }
      }
      &-date {
        font-size: 11 * 2px;
        color: #141924;
        font-weight: 590;
      }
      &-time {
        font-size: 13 * 2px;
        color: #999da7;
        margin: 8 * 2px 0;
      }
      &-bdc {
        font-size: 14 * 2px;
        color: #007bff;
        font-weight: 600;
      }
      &-hash {
        font-size: 13 * 2px;
        color: #999da7;
        &-value {
          font-size: 14 * 2px;
          color: #007bff;
        }
        &-copy {
          margin-left: 8 * 2px;
          width: 18 * 2px;
          height: 18 * 2px;
        }
      }
      &-footer {
        justify-content: space-between;
      }
      &-temas {
        color: #999da7;
        font-size: 13 * 2px;
        font-weight: 400;
      }
      &-temas1 {
        margin-left: 2 * 2px;
        white-space: nowrap;
        color: #141924;
        font-size: 11 * 2px;
        font-weight: 590;
      }
    }
  }
}
</style>
